<template>
  <div>
      <ul class="ul">
          <li style="color:#00CF8C">首页</li>
          <a-dropdown>
    <a class="ant-dropdown-link" @click="e => e.preventDefault()" style="float: left; color:black">
      课程分类 <a-icon type="down" />
    </a>

              <a-menu slot="overlay">
                  <a-menu-item v-for="(item,index) in list" :key="index">
                      <a href="javascript:;"> {{item.subjectTitle}}</a>
                  </a-menu-item>
              </a-menu>

  </a-dropdown>
          <li>专属课程</li>
      </ul>
      <div style="clear:both"></div>
      <a-carousel autoplay>
    <div class="img1"></div>
    <div class="img1"></div>
    <div class="img1"></div>
    <div class="img1"></div>
  </a-carousel>
  </div>
</template>

<script>
    import {getList} from "../utils/getList"
    export default {
data(){
    return {
        list:[]
    }
},
created() {
    getList().then((res)=>{
        this.list=res.data.rows
    })
}
}
</script>

<style  scoped>

.ul{
    list-style: none;
    padding-left: 162px;
    font-size: 16px;
}
.ul>li{
    float: left;
    margin: 0 15px
}
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 340px;
  line-height: 340px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
.img1{
  background-image: url('https://online-course.nos-eastchina1.126.net/4-1245893706096050176.jpg');
  background-repeat: no-repeat;
    background-position: 50%;
    width: 100%;
    height: 400px;
    background-size: cover;

}
</style>



